<template>
  <div class="good-card-item">
    <img :src="require('@/assets/image/default_img.png')">
    <div>
      <li class="good-tile text-overflow_1-xzh">乐事无限薯片三连罐3罐休 闲油炸食品</li>
      <li class="good-price">
        <span>¥388</span>
        <span>¥388</span>
      </li>
      <em>月销99笔</em>
      <li class="good-card-tag">
        <van-tag plain
                 color="#E85014">已加购</van-tag>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  created () { },
  methods: {}
}

</script>

<style lang='scss'>
.good-card-item {
  width: 3.3rem;
  display: flex;
  flex-direction: column;
  box-shadow: 1px 1px 3px rgba(1, 1, 1, 0.1);
  position: relative;
  margin-bottom: 0.2rem;
  border-radius: 0.1rem;
  overflow: auto;
  em {
    font-size: 0.18rem;
    color: #666666;
  }
  img {
    width: 100%;
    height: 3.2rem;
  }
  div {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0.1rem;
    background-color: #ffffff;
    .good-tile {
      font-size: 0.26rem;
      margin-bottom: 0.1rem;
    }
    .good-price {
      width: 100%;
      span {
        &:first-child {
          font-size: 0.34rem;
          color: #e85014;
          margin-right: 0.15rem;
        }
        &:last-child {
          font-size: 0.18rem;
          text-decoration: line-through;
          color: #999999;
        }
      }
    }
    .good-card-tag {
      margin-top: 0.1rem;
    }
  }
}
</style>